<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="root"></div>
		<script type="text/babel">
			class HelloWorld extends React.Component{
				constructor(){
					console.log('构造函数...');
					super()
					this.nowTime=new Date().getTime()
					this.state={
						now:new Date().getDate()
					}
				}
				componentDidMount(){
					console.log('组件渲染完成...');
					setTimeout(()=>{
						this.setState({
							now:'新时间'
						})
					},2000)
				}
				componentWillMount(){
					console.log('组件即将被销毁...');
				}
				render(){
					console.log('render...');
					return (
						<div>
							<h2>倒计时</h2>
							<span>{new Date().toString()}</span>
							<p>{this.nowTime}</p>
							<p>{this.state.now}</p>
						</div>
					)
				}
			}
			ReactDOM.render(<HelloWorld />, document.getElementById('root'));
		</script>
	</body>
</html>
